<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Image from "./Image.svelte";
    import { fn } from "storybook/test";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import img1 from "../../assets/images/1.jpg";
    import img2 from "../../assets/images/2.jpg";
    import img3 from "../../assets/images/3.jpg";
    import img4 from "../../assets/images/4.jpg";
    import img5 from "../../assets/images/5.jpg";
    import img6 from "../../assets/images/6.jpg";
    import img7 from "../../assets/images/7.jpg";
    import img8 from "../../assets/images/8.jpg";
    import img9 from "../../assets/images/9.jpg";
    import img10 from "../../assets/images/10.jpg";
    import { Button } from "../Button";
    import { Spin } from "../Spin";
    import { Space } from "../Space";

    const { Story } = defineMeta({
        title: "Components/Views/Image",
        component: Image,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let src = $state("");
</script>

<Story name="Default">
    {#snippet template(args)}
        <Row gutter={20} style="text-align: center">
            <Col grid={1 / 5}>
                <Image width={100} height={100} fit="contain" src={img1} />
                <div>contain</div>
            </Col>
            <Col grid={1 / 5}>
                <Image width={100} height={100} fit="cover" src={img1} />
                <div>cover</div>
            </Col>
            <Col grid={1 / 5}>
                <Image width={100} height={100} fit="fill" src={img1} />
                <div>fill</div>
            </Col>
            <Col grid={1 / 5}>
                <Image width={100} height={100} fit="none" src={img1} />
                <div>none</div>
            </Col>
            <Col grid={1 / 5}>
                <Image width={100} height={100} fit="scale-down" src={img1} />
                <div>scale-down</div>
            </Col>
        </Row>
    {/snippet}
</Story>
<Story name="Placeholder">
    {#snippet template(args)}
        <Space dir="h">
            <Row style="text-align: center" gutter={20}>
                <Col grid={0.5}>
                    <Image width={200} height={100} fit="cover" {src} />
                    <div>默认</div>
                </Col>
                <Col grid={0.5}>
                    <Image width={200} height={100} fit="cover" {src}>
                        {#snippet placeholder()}
                            <Spin />
                        {/snippet}
                    </Image>
                    <div>自定义</div>
                </Col>
            </Row>
            <Button
                type="primary"
                onclick={() => {
                    src = img10;
                }}>加载</Button
            >
        </Space>
    {/snippet}
</Story>
<Story name="Lazy">
    {#snippet template(args)}
        {@const verticalUrlList = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10]}
        <div class="demo-image-lazy-vertical">
            {#each verticalUrlList as url}
                <Image src={url} lazy scrollContainer=".demo-image-lazy-vertical" />
            {/each}
        </div>
    {/snippet}
</Story>

<Story name="Preview">
    {#snippet template(args)}
        {@const verticalUrlList = [img1, img2, img3, img4, img5, img6, img7, img8, img9, img10]}
        <Space dir="h" wrap>
            {#each verticalUrlList as url, index}
                <Image src={url} width={120} maskClosable={false} height={80} fit="contain" preview previewIndex={index} previewList={verticalUrlList} />
            {/each}
        </Space>
    {/snippet}
</Story>
